<template>
	<view class="container">
			<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30" @click="jump('/pages/my/setting/setting')">
			<view class="avatar u-m-r-10">
				<image v-if="user_info.avatar" class="avatar" :src="user_info.avatar" mode="widthFix"></image>
			</view>
			<view class="u-flex-1">
				<view class="u-font-18 u-m-l-10" v-if="token">{{ user_info.user_nickname || '未设置昵称' }}</view>
				<view class="u-font-18 u-m-l-10" @click.stop="$u.route('/pages/login/login')" v-else>点击登录</view>
			</view>
			<view class="u-m-l-10 u-p-10">
				<u-icon name="arrow-right" color="#969799" size="28"></u-icon>
			</view>
		</view>
		<!-- <view class="myinfo flex-box-x" v-if="token">
			<view class="avator" @click.stop="$u.route('/pages/login/login')">
				<img :src="user_info.avatar">
			</view>
			<view class="cont col-xs-x flex-y-center" v-if="token">
				<view class="box">
					<view class="name">{{user_info.user_nickname || '未设置昵称'}}</view>
					<view class="info displayFlex flex-xy-center">
						<view class="flex">ID：{{user_info.id}}</view>
						<view class="flex">等级：{{user_info.grade_name}}</view>
						<view class="box_zl" onclick="perfect_data()">完善资料</view>
					</view>
					<view class="box_zl" onclick="scan_hide()">关注我</view>
					<view style="display: flex;">
						<view class="date" style="flex:1;">加入时间：{{user_info.create_time}}</view>
					</view>
					<view style="display: flex;flex-direction: flex-start;">
						<view class="rferee">推荐人：{{user_info.referrer_name}}</view>
					</view>
				</view>
			</view>
		</view> -->
		<!-- 我的团队消息 -->
		<view class="team">
			<view class="item" @click="jump('portal/my/my_balance')">
				<view class="team_money">{{user_info.account_balance}}</view>
				<view>余额</view>
			</view>
			<!-- href="{:url('portal/my/my_red_envelope_money')}" -->

			<view class="item" @click="jump('portal/my/my_red_balance_detail/index')">
				<view class="team_money">{{user_info.redpackets_balance}}</view>
				<view>红包</view>
			</view>
			<view class="item">
				<view class="team_money">{{income}}</view>
				<view>总收入</view>
			</view>
			<view class="item" @click="jump('portal/gold/shop_details')">
				<view class="team_money">{{gold}}</view>
				<view>金币</view>
			</view>
		</view>
		<!-- 公告 -->
		<view class="notice flex-box-x">
			<view class="left">公告</view>
			<view class="center col-xs-x">
				<view class="swiper-container" id="swiper_ind">
					<view class="swiper-wrapper" id="swiper_title">
						<!-- <view class="swiper-slide"></view> -->
					</view>
				</view>
			</view>
			<!-- <view class="more">更多</view> -->
		</view>
		<!-- 导航 -->
		<view class="teaminfo">
			<view class="item" @click="jump('/pages/order/orderList')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/wdsq.jpg">
				<view class="tit">订单中心</view>
			</view>
			<view class="item" @click="jump('/pages/my/my_management_recommend/index')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/tdgl.jpg">
				<view class="tit">团队管理</view>
			</view>
			<view class="item" @click="jump('portal/my/my_account_account')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/txzh.jpg">
				<view class="tit">提现账号</view>
			</view>
			<view class="item" @click="jump('portal/my/my_ktpx')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/ktpx.jpg">
				<view class="tit">学习天地</view>
			</view>
			<view class="item" @click="jump('portal/my/my_information')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/wdzl.jpg">
				<view class="tit">我的资料</view>
			</view>
			<view class="item" @click="jump('portal/my/my_login')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/icon_message.jpg">
				<view class="tit">商家管理</view>
			</view>
			<view class="item" @click="jump('portal/my/my_about_us')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/dlsm.jpg">
				<view class="tit">关于我们</view>
			</view>
			<view class="item" @click="jump('portal/my/my_recommend')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/tjm.jpg">
				<view class="tit">推广码</view>
			</view>
			<!-- <view class="item" @click="jump('portal/store/red_code')" v-if="users.member_grade > 0">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/tjm.jpg">
				<view class="tit">红包码</view>
			</view> -->
			<!-- <view class="item" @click="jump('portal/finance/loan')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/daikuan.jpg">
				<view class="tit">贷款</view>
			</view>
			<view class="item" @click="jump('portal/finance/credit_card')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/xyk.jpg">
				<view class="tit">信用卡</view>
			</view> -->
			<view class="item" @click="jump('portal/my/my_announcement')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/xtgg.jpg">
				<view class="tit">系统公告</view>
			</view>

			<view class="item" @click="jump('portal/my/my_service')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/zskf.jpg">
				<view class="tit">专属客服</view>
			</view>
			<view class="item" @click="jump('portal/my/my_collection')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/collection.jpg">
				<view class="tit">收藏</view>
			</view>
			<view class="item" @click="jump('portal/my/my_follow')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/follow.jpg">
				<view class="tit">关注</view>
			</view>
			<view class="item" @click="jump('portal/service/service_list')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/icon_message.jpg">
				<view class="tit">我的消息</view>
			</view>
			<view class="item" @click="jump('portal/short_video/index')">
				<img src="https://shop.zdsy.shop/themes/screens/public/assets/images/icon_message.jpg">
				<view class="tit">短视频</view>
			</view>
		</view>
		<!-- <view class="u-m-t-20" v-for="(menu, menuIndex) in menus" :key="menuIndex">
			<u-cell-group>
				<u-cell-item v-for="(item, itemIndex) in menu" :key="itemIndex" :icon="item.icon" :title="item.title"
					@click="jump(item.url)"></u-cell-item>
			</u-cell-group>
		</view> -->
		<view class="u-m-t-20" v-if="token">
			<u-cell-group>
				<u-cell-item icon="error-circle" title="注销" @click="logout"></u-cell-item>
			</u-cell-group>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user', 'token']) // vuex获取用户数据
		},
		data() {
			return {
				menus: [
					[{
						title: '文章管理',
						icon: 'edit-pen',
						url: '/pages/my/myArticle/myArticle'
					}, {
						title: '订单列表',
						icon: 'order',
						url: '/pages/order/orderList'
					}],
					[{
							title: '我的收藏',
							icon: 'star',
							url: '/pages/my/myFavorites/myFavorites'
						},
						{
							title: '我的评论',
							icon: 'chat',
							url: '/pages/my/myCommnet/myCommnet'
						},
						{
							title: '收货地址',
							icon: 'map',
							url: '/pages/my/address/address'
						}
					],
					[{
						title: '账号',
						icon: 'lock',
						url: '/pages/my/bind/bind'
					}, {
						title: '设置',
						icon: 'setting',
						url: '/pages/my/setting/setting'
					}]
				],
				gold: 0,
				income: 0,
				user_info: {}
			};
		},
		onLoad() {
			console.log(uni.getStorageSync('token'))
			if(uni.getStorageSync('token')){
				this.getUser()
			}
		},
		methods: {
			getUser() {
				this.$api.get({
					url: 'portal/shop/my',
					success: res => {
						console.log(res)
						if (res.code == 1) {
							this.user_info = res.data.users;
						} else {
							this.$toast('数据获取失败');
						}
					}
				});

			},
			jump(url) {
				// this.$isLogin 判断是否登录，true:弹窗提醒
				if (this.$isLogin(true)) {
					this.$u.route(url);
				}
			},
			// 注销
			logout() {
				let that = this;
				uni.showModal({
					title: '提示',
					content: '确认注销登录？',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							that.$store.commit('logout');
						}
					}
				});
			}
		}
	};
</script>
<style>
	a:link {
		text-decoration: none;
	}

	a:visited {
		text-decoration: none;
	}

	a:hover {
		text-decoration: none;
	}

	a:active {
		text-decoration: none;
	}

	a {
		color: #666;
	}

	.icon-peoplefill {
		color: #DF2E26;
	}

	.myinfo {
		padding: 1rem;
		background: #DF2E26;
	}

	.myinfo .avator {
		margin-right: .4rem;
	}

	.myinfo .avator img {
		width: 3rem;
		height: 3rem;
		border-radius: 50%;
		/*border: .026667rem solid #fff;*/
	}

	.myinfo .cont .box {
		width: 100%;
	}

	.myinfo .cont .name {
		font-size: .8rem;
		margin-bottom: .266667rem;
		color: #fff;
	}

	.myinfo .cont .info {
		font-size: .6rem;
		color: #fff;
		margin-bottom: .2rem
	}

	.myinfo .cont .info span {
		margin-right: .2rem
	}

	.myinfo .cont .date {
		font-size: .6rem;
		color: #fff;
		margin-bottom: .2rem
	}

	.myinfo .cont .rferee {
		text-align: right;
		color: #fff;
		font-size: .6rem;
	}

	.team {
		padding: .4rem .4rem;
		overflow: hidden;
		background: #fff;
		text-align: center;
		font-size: .6rem;
	}

	.team .item {
		float: left;
		width: 25%;
		padding: .2rem 0;
		color: #000;
	}

	.teaminfo {
		padding: .4rem .4rem;
		overflow: hidden;
		background: #fff;
		text-align: center;
		font-size: .6rem;
		display: table-cell;
		/*主要是这个属性*/
		vertical-align: middle;
	}

	.teaminfo .item {
		float: left;
		width: 25%;
		padding: .2rem 0;
		color: #000;
	}

	.teaminfo .item img {
		width: 1.5rem;
		height: 1.5rem;
		display: inline-block;
	}

	.team_money {
		color: #5a9bd3;
		font-size: .8rem;
	}

	/* 公告 */

	.notice {
		height: 1.8rem;
		line-height: 1.8rem;
		background: #fff;
		border-radius: 0.8rem;
		margin: .4rem .4rem;
		padding: 0 1rem;
		overflow: hidden;
	}

	.notice .left {
		margin-right: .4rem;
		color: #fd5b5c;
		font-weight: 600;
	}

	/* 列表 */

	.list {
		background: #fff;
		overflow: hidden;
		padding: .4rem 0;
	}

	.list .item {
		float: left;
		width: 25%;
		padding: .4rem 0;
		text-align: center;
		color: #333;
		text-decoration: none;
	}

	.list .item .box .pic {
		height: 1.6rem;
		max-height: 1.6rem;
		margin-bottom: .2rem;
	}

	.list .item .box .pic img {
		height: 100%;
		margin: auto;
	}

	.list .item .box .name {
		font-size: .6rem;
	}

	.native-scroll {
		margin-bottom: 50px;
	}

	.flex-box-y {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		display: -webkit-flex
	}

	.swiper-container {
		width: 100%;
		height: 100%;
	}

	.center {
		font-size: .625rem;
	}

	.swiper-slide {
		/*text-align: center;
      font-size: 18px;
      background: #fff;
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      overflow: hidden;*/
	}

	.displayFlex {
		display: flex;
	}

	.flex {
		flex: 1;
	}

	.box_zl {
		padding: 4px;
		border-radius: 6px;
		background: rgba(255, 255, 255, 0.4);
		color: #fff;
		position: absolute;
		right: 1rem;
		top: 1rem;
		font-size: 0.6rem;
		width: 2.8rem;
		text-align: center;
	}

	.my-scan-shadow {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 999;
		display: none;
	}

	.my-scan {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		height: 10rem;
		width: 80%;
		background-color: #fff;
		border-radius: 0.2rem;
	}

	.my-scan p {
		text-align: center;
		padding-top: 0.8rem;
		color: #000;
		font-weight: bold;
	}

	.scan-img {
		display: flex;
		align-items: center;
		margin: 0 0.5rem;
		padding-top: 1rem;
	}

	.end-scan {
		position: absolute;
		right: 0.2rem;
		top: 0.2rem;
		width: 1rem;
	}

	.list_box {
		display: flex;
		align-items: center;
		margin: 0 0.5rem 0 1rem;
		color: #333;
		font-size: 0.7rem;
	}

	.list_box .name {
		align-items: center;
		border-bottom: 1px solid #f1f1f1;
		padding: 0.5rem;
		padding-right: 0;
	}

	.list_box a:visited {
		text-decoration: none;
		color: #333;
	}

	.box_img {
		width: 1.2rem;
		height: 1.2rem;
		margin-right: 0.5rem;
	}

	.box_img img {
		width: 100%;
		height: 100%;
	}

	.box_right {
		width: 1rem;
		height: 1rem;
	}

	.box_right img {
		width: 100%;
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.user-box {
		background: #fff;

		.avatar {
			width: 110rpx;
			height: 110rpx;
			border-radius: 55rpx;
			background: #ffe2b8;
		}
	}

	.logout {
		display: flex;
		justify-content: center;
		margin-top: 50rpx;
	}
</style>
